// pages/category/category.js
const app = getApp();
let api = require('../../utils/api.js');
let util = require('../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    topDistance: '0rpx',
    menuAnimation: '',
    menuInfo: [null, null, null, null, null, null, null, null, null],
    currentItem: app.globalData.curCate,
    swiperData: [null, null, null, null, null, null, null, null, null],
    categoryList: [null, null, null, null, null, null, null, null, null],
    currentCategory: null,
    fontColorArr: ['white', 'black', 'black', 'black', 'black', 'black', 'black', 'black', 'black']
  },
  //菜单点击事件
  onTapMenu(e) {
    //改变右侧轮播current的值
    this.setData({
      currentItem: e.currentTarget.dataset.index,
    })
  },
  //背景块下移动画
  translateY: function(topDist) {
    this.menuAnimation.translateY(topDist).step();
    this.setData({
      menuAnimation: this.menuAnimation.export(),
    })
  },
  //获取菜单的位置
  getAllMenu: function() {
    let that = this;
    wx.createSelectorQuery().selectAll('.menuItem').boundingClientRect(function(rect) {
      that.setData({
        menuInfo: rect,
      })
    }).exec();
  },
  //右侧轮播滑动
  swiperChange(e) {
    //左侧菜单效果
    var topDist = this.data.menuInfo[e.detail.current].top - this.data.menuInfo[0].top;
    this.translateY(topDist);
    this.setData({
      fontColorArr: ['black', 'black', 'black', 'black', 'black', 'black', 'black', 'black', 'black'],
      ['fontColorArr[' + e.detail.current + ']']: 'white',
    })
    // 判断滑动将显示的数据是否存在
    if (!this.data.swiperData[e.detail.current]) {
      //请求对应的数据
      util.merReq(api.currentUrl, {id: this.data.categoryList[e.detail.current].id}, (res) => {
        //数据赋值
        this.setData({
          ['swiperData[' + e.detail.current + ']']: res.data.data.currentCategory,
        })
      }, 'GET')
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var menuAnimation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    this.menuAnimation = menuAnimation;
    this.getAllMenu();
    //获取菜单位置信息
    this.getAllMenu();
      //请求分类数据
      util.merReq(api.categoryUrl, {}, (res) => {
        console.log(app.globalData.curCate)
        //判断是通过index点击进入还是tabBar点击进入
        if(app.globalData.curCate){
          util.merReq(api.currentUrl, { id: res.data.data.categoryList[app.globalData.curCate].id},res=>{
            console.log("菜单进入")
            this.setData({
              ['swiperData[' + app.globalData.curCate + ']']: res.data.data.currentCategory,
            })
          },'GET')
        }else{
          
          util.merReq(api.currentUrl, { id: res.data.data.categoryList[0].id }, res => {
            console.log('tabbar进入')
            this.setData({
              ['swiperData[0]']: res.data.data.currentCategory,
            })
          }, 'GET')
        }
        //将数据储存在data
        this.setData({
          categoryList: res.data.data.categoryList,
        })
      }, 'GET')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    this.setData({
      currentItem: app.globalData.curCate,
    })
    console.log(app.globalData.curCate)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    app.globalData.curCate=null;
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})